<template>
	<div class="dataAnalysis" @dblclick="onScreenfullClick()">
		<div class="echartsTitle" v-if="getStatPageShow">
			<img src="./images/etp.png"></img>
			<div class="echartsH5">早知道安装数据一览平台</div>
		</div>
		<div class="echarts" v-if="getStatPageShow">
			<div class="echartsLeft">
				<div class="echartsList">
					<div class="echartsListDom">
						<img class="echartsListImg" src="./images/l1.png" mode=""></img>
						<div class="echartsListText">
							<div>总安装数</div>
							<div class="echartsListTextDiv">
								<countTo class="echartsListDomSpan echartsListDomHide"
									v-if="getStatPageData.appInstall.totalCount.length < 8"
									v-for="item in 8 - getStatPageData.appInstall.totalCount.length" :start-val="0" :end-val="0"
									:duration="10"> </countTo>
								<countTo class="echartsListDomSpan" v-for="item in getStatPageData.appInstall.totalCount"
									:start-val="parseInt(item)" :end-val="parseInt(item)" :duration="10"> </countTo>

							</div>

							<div v-if="parseFloat(getStatPageData.appInstall.growthRate) >= 0">
								近一周安装数
								<countTo class="countTo" :start-val="parseInt(getStatPageData.appInstall.currentCount)"
									:end-val="parseInt(getStatPageData.appInstall.currentCount)" :duration="10">
								</countTo>
								次
								对比上周增长:
								<span class="front">+{{ getStatPageData.appInstall.growthRate.split('.')[0] }}</span>
								<span class="after">.{{ getStatPageData.appInstall.growthRate.split('.')[1] }}%</span>

							</div>
							<div v-if="parseFloat(getStatPageData.appInstall.growthRate) < 0">
								近一周安装数
								<countTo class="countTo" :start-val="parseInt(getStatPageData.appInstall.currentCount)"
									:end-val="parseInt(getStatPageData.appInstall.currentCount)" :duration="10">
								</countTo>
								次
								对比上周增长:
								<span class="front red">{{ getStatPageData.appInstall.growthRate.split('.')[0] }}</span>
								<span class="after red">.{{ getStatPageData.appInstall.growthRate.split('.')[1] }}%</span>

							</div>
						</div>
					</div>
					<div class="echartsListDom">
						<img class="echartsListImg" src="./images/l2.png" mode=""></img>
						<div class="echartsListText">
							<div>总设备数</div>
							<div class="echartsListTextDiv">
								<countTo class="echartsListDomSpan echartsListDomHide"
									v-if="getStatPageData.deviceRegister.totalCount.length < 8"
									v-for="item in 8 - getStatPageData.deviceRegister.totalCount.length" :start-val="0" :end-val="0"
									:duration="10"> </countTo>
								<countTo class="echartsListDomSpan" v-for="item in getStatPageData.deviceRegister.totalCount"
									:start-val="parseInt(item)" :end-val="parseInt(item)" :duration="10"> </countTo>
							</div>
							<div v-if="parseFloat(getStatPageData.deviceRegister.growthRate) >= 0">
								近一周新增设备数
								<countTo :start-val="parseInt(getStatPageData.deviceRegister.currentCount)"
									:end-val="parseInt(getStatPageData.deviceRegister.currentCount)" :duration="10">
								</countTo>
								台
								对比上周增长:
								<span class="front">+{{ getStatPageData.deviceRegister.growthRate.split('.')[0] }}</span>
								<span class="after">.{{ getStatPageData.deviceRegister.growthRate.split('.')[1] }}%</span>
							</div>
							<div v-if="parseFloat(getStatPageData.deviceRegister.growthRate) < 0">
								近一周新增设备数
								<countTo :start-val="parseInt(getStatPageData.deviceRegister.currentCount)"
									:end-val="parseInt(getStatPageData.deviceRegister.currentCount)" :duration="1000">
								</countTo>
								台
								对比上周增长:
								<span class="front red">{{ getStatPageData.deviceRegister.growthRate.split('.')[0] }}</span>
								<span class="after red">.{{ getStatPageData.deviceRegister.growthRate.split('.')[1] }}%</span>
							</div>
						</div>

					</div>
					<div class="echartsListDom">
						<img class="echartsListImg" src="./images/l3.png" mode=""></img>
						<div class="echartsListText">
							<div>总用户数</div>
							<div class="echartsListTextDiv">
								<countTo class="echartsListDomSpan echartsListDomHide"
									v-if="getStatPageData.appInstall.totalCount.length < 8"
									v-for="item in 8 - getStatPageData.userRegister.totalCount.length" :start-val="0" :end-val="0"
									:duration="1000"> </countTo>
								<countTo class="echartsListDomSpan" v-for="item in getStatPageData.userRegister.totalCount"
									:start-val="parseInt(item)" :end-val="parseInt(item)" :duration="10"> </countTo>
							</div>
							<div v-if="parseFloat(getStatPageData.userRegister.growthRate) >= 0">
								近一周新增用户数 <countTo :start-val="parseInt(getStatPageData.userRegister.currentCount)"
									:end-val="parseInt(getStatPageData.userRegister.currentCount)" :duration="10">
								</countTo>位
								对比上周增长:
								<span class="front">+{{ getStatPageData.userRegister.growthRate.split('.')[0] }} </span>
								<span class="after">.{{ getStatPageData.userRegister.growthRate.split('.')[1] }} %</span>
							</div>
							<div v-if="parseFloat(getStatPageData.userRegister.growthRate) < 0">
								近一周新增用户数 <countTo :start-val="parseInt(getStatPageData.userRegister.currentCount)"
									:end-val="parseInt(getStatPageData.userRegister.currentCount)" :duration="10">
								</countTo>位
								对比上周增长:
								<span class="front red">{{ getStatPageData.userRegister.growthRate.split('.')[0] }} </span>
								<span class="after red">.{{ getStatPageData.userRegister.growthRate.split('.')[1] }} %</span>

							</div>
						</div>
					</div>

					<div class="echartsListDom">
						<img class="echartsListImg" src="./images/l4.png" mode=""></img>
						<div class="echartsListText">
							<div>总广告展示次数</div>
							<div class="echartsListTextDiv">
								<countTo class="echartsListDomSpan echartsListDomHide"
									v-if="getStatPageData.appInstall.totalCount.length < 8"
									v-for="item in 8 - getStatPageData.eventAdvStats.totalCount.length" :start-val="0" :end-val="0"
									:duration="10"> </countTo>
								<countTo class="echartsListDomSpan" v-for="item in getStatPageData.eventAdvStats.totalCount"
									:start-val="parseInt(item)" :end-val="parseInt(item)" :duration="10"> </countTo>
							</div>
							<div v-if="parseFloat(getStatPageData.eventAdvStats.growthRate) >= 0">
								近一周展示次数
								<countTo :start-val="parseInt(getStatPageData.eventAdvStats.currentCount)"
									:end-val="parseInt(getStatPageData.eventAdvStats.currentCount)" :duration="10">
								</countTo>次
								对比上周增长:
								<span class="front">+{{ getStatPageData.eventAdvStats.growthRate.split('.')[0] }}</span>
								<span class="after">.{{ getStatPageData.eventAdvStats.growthRate.split('.')[1] }} %</span>
							</div>
							<div v-if="parseFloat(getStatPageData.eventAdvStats.growthRate) < 0">
								近一周展示次数
								<countTo :start-val="parseInt(getStatPageData.eventAdvStats.currentCount)"
									:end-val="parseInt(getStatPageData.eventAdvStats.currentCount)" :duration="10">
								</countTo>次
								对比上周增长:
								<span class="front red">{{ getStatPageData.eventAdvStats.growthRate.split('.')[0] }}</span>
								<span class="after red">.{{ getStatPageData.eventAdvStats.growthRate.split('.')[1] }} %</span>
							</div>
						</div>

					</div>
				</div>
				<div class="pieEcharts pieEchartsCon">
					<div class="pieEchartsNum">
						<div class="echartsTotal">
							<div class="echartsTotalTitle">总激活数 </div>
							<div class="echartsTotalDom">
								<span class="echartsTotalNum echartsListDomHide"
									v-for="item in 8 - getStatPageData.deviceRegister.totalCount.length">
									<countTo class="echartsListDomSpan" :start-val="0" :end-val="0" :duration="10"> </countTo>
								</span>
								<span class="echartsTotalNum" v-for="item in getStatPageData.deviceRegister.totalCount">
									<countTo :start-val="parseInt(item)" :end-val="parseInt(item)" :duration="10" :useEasing="true">
									</countTo>
								</span>
							</div>
						</div>
						<img src="./images/zj.png" mode=""></img>
					</div>
					<div class="echartsTj">
						<div class="echartsTjDom">
							<span>
								日活跃量
							</span>

							<countTo :start-val="getStatPageData.appStartActiveUserStats.dau"
								:end-val="getStatPageData.appStartActiveUserStats.dau" :duration="10"></countTo>

						</div>
						<div class="echartsTjDom">
							<span>周活跃量</span>

							<countTo :start-val="getStatPageData.appStartActiveUserStats.dau"
								:end-val="getStatPageData.appStartActiveUserStats.wau" :duration="10"></countTo>

						</div>
						<div class="echartsTjDom">
							<span>月活跃量</span>

							<countTo :start-val="getStatPageData.appStartActiveUserStats.dau"
								:end-val="getStatPageData.appStartActiveUserStats.mau" :duration="10"></countTo>

						</div>
					</div>
				</div>
				<div class="pieEcharts">
					<div class="pieEchartsDom">
						<div class="pieEchartsDomTitle"><span>平均打开时长</span></div>

						<population :appStartStats="getStatPageData.appStartStats" />
					</div>
					<div class="pieEchartsDom">
						<div class="pieEchartsDomTitle"><span>平均打开APP次数</span></div>
						<barLineThree :appStartStats="getStatPageData.appStartStats" />
					</div>
				</div>
			</div>
			<div class="echartsCenter">
				<div class="echartsDom">
					<div class="pieEchartsDomTitle"><span>各模块停留时长</span></div>
					<barLineTow :eventModuleStats="getStatPageData.eventModuleStats" />
				</div>
				<div class="echartsDom">
					<div class="pieEchartsDomTitle"><span>各模块广告点击次数</span></div>
					<categoryLin :eventAdvStats="getStatPageData.eventAdvStats" />
				</div>
				<div class="echartsDom">
					<div class="pieEchartsDomTitle"><span>各模块点击次数</span></div>
					<barLine :eventModuleStats="getStatPageData.eventModuleStats" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import categoryLin from './components/category.vue';
import barLine from './components/barLine.vue';
import barLineTow from './components/barLineTow.vue';
import barLineThree from './components/barLineThree.vue';
import population from './components/population.vue';
import screenfull from 'screenfull';
import countTo from '/@/components/countTo/vue-countTo.vue';
import {getStatPage } from '/@/api/admin/dataAnalysis';
export default {
	components: {
		countTo,
		barLine,
		barLineTow,
		barLineThree,
		population,
		categoryLin,
	},
	created() {
			this.getStatPage();
		
	},
	mounted() {
		
	},
	 beforeDestroy() {
    // 清除定时器，防止组件销毁后仍然执行
    clearInterval(this.interval);
  },
	data() {
		return {
			detailsShow:false,
			interval:null,
			endVal: 2017,
			echartsTotal: '2544111',
			// 统计命令信息
			getStatPageShow:false,
			randomNumber: 1,
			getStatPageData:{
				appStartStats:[],
				eventModuleStats:[{
					module:'1',
					avgDuration:'10',
					maxDuration:"100",
					clickCount:'100',

				}],
				eventAdvStats:{
					moduleClickCount:[{
						module:"5.20",
						count:100
						}]
				},
				appInstall:{
					currentCount:5,
					totalCount:'9555',
					previousCount:10,
					growthRate:20,
					currentCount:5,
				},
				deviceRegister:{
					totalCount:'889',
					currentCount:30,
					growthRate:12
				},
				userRegister:{
					totalCount:'289',
					previousCount:80,
					growthRate:30,
					currentCount:5,
				},
				eventAdvStats:{
					totalCount:'589',
					previousCount:50,
					growthRate:15
				}
			}
		};
	},
	beforeUnmount() {
			if (this.interval) {
				clearInterval(this.interval); // 清除计时器以避免内存泄漏
			}
	},
	methods: {
		detailsClick(){
			this.detailsShow=!this.detailsShow
		},
		// 全屏点击时
		onScreenfullClick () {
			if (!screenfull.isEnabled) {
				ElMessage.warning('暂不不支持全屏');
				return false;
			}
			screenfull.toggle();
		},
		getStatPage() {
			let data={
				module: "string"
			}
			clearInterval(this.interval); // 清除计时器以避免内存泄漏
			getStatPage(data)
				.then((res) => {
					if (res.code === 0) {
							this.getStatPageShow=true
							this.getStatPageData=res.data
							this.setIntervalPage()
					}
				})
				.catch((err) => {
					this.setIntervalPage()
					console.log(err)
				});
		},

		setIntervalPage(){
			this.interval=setInterval(()=> {
					this.getStatPage()
				},10000)
		},
	
	},
};
</script>
<style scoped lang="scss">
$win-width: 100%;
$win-height: 100%;
$win-width-vh: 100vh;
$win-width-vw: 100vw;
$echarts-h5: 68px;

.front {
	font-size: calc($win-width-vw * 0.05 / 5);
	color: #15DDAA;
}

.after {
	color: #15DDAA;
	font-size: calc($win-width-vw * 0.05 / 8);
}

.red {
	color: #E74C53;
}

div {
	box-sizing: border-box;
	// aspect-ratio: 16 / 3; /* 或者任何其他宽高比 */
}

.dataAnalysis {
	background-image: url('./images/bj.png');
	background-size: 100% 100%;
	width: $win-width;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	overflow: auto;
	font-family:
		PingFang SC,
		PingFang SC;
}

.echartsTitle {
	width: 100%;
	padding: 0% 0;
	position: relative;
	height: calc($win-width-vw * 0.052);

	.echartsH5 {
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		color: #7efafc;
		top: 0;
		font-size: calc($win-width-vw * 0.05 / 3.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	img {
		width: 100%;
		height: 100%;
	}
}

.echarts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: calc($win-width-vw / 2 - $win-width-vw * 0.08);
	height: calc($win-width-vh - $win-width-vw * 0.052);
	flex-direction: column;
	width: $win-width;
	padding: 1%;
	background-image: url('./images/bj.png');
	background-size: 100% 100%;
	padding-top: 0;

	.echartsLeft {
		width: 100%;
		height: 60%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.echartsList {
			width: 33%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			position: relative;

			.echartsListDom {
				padding: 20px;
				display: flex;
				width: 100%;
				height: 23%;
				border-radius: 5px;
				color: #fff;
				// border: 2px solid #2366ce;
				align-items: center;
				justify-content: space-between;
				color: #4cb1ff;
				font-size: calc($win-width-vw * 0.05 / 6);
				position: relative;
				padding: 2% 0;

				.echartsListText {
					width: 100%;
					position: relative;
					z-index: 2;
					padding: 0% 6%;

					.echartsListTextDiv {
						display: flex;
						width: 100%;

						.echartsListDomSpan {
							width: 6%;
							color: #66ffff;
							font-size: calc($win-width-vw * 0.05 / 5);
							text-align: center;
							background-image: url('./images/numb.png');
							background-size: 100% 100%;
							margin: 1.5%;
							margin-right: 2%;
							margin-left: 0;
						}


					}
				}

				.echartsListImg {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
				}


			}

			.echartsListDom:nth-child(2) {
				width: 91%;
			}

			.echartsListDom:nth-child(3) {
				width: 91%;
			}
		}
	}

	.echartsListDomHide {
		opacity: .5;
	}

	.echartsRight {
		width: 35%;
		padding: 40px;
		min-width: 700px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
	}

	.echartsTj {
		width: 100%;
		background: linear-gradient(to bottom, #8fe1f3, #00cfff);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 6%;
		z-index: 99;
		height: 19%;

		.echartsTjDom {
			width: 29%;
			height: 100%;
			text-align: center;
			background-image: url('./images/z1.png');
			background-size: 100% 100%;
			font-size: calc($win-width-vw * 0.05 / 5.5);
			display: flex;
			line-height: 2vw;
			flex-direction: column;
			justify-content: center;
		}

		span {
			display: block;
			font-weight: 600;
			font-size: calc($win-width-vw * 0.05 / 5.7);
			letter-spacing: 2px;
			margin-bottom: 3%;
		}
	}

	.echartsCenter {
		width: 100%;
		// min-width: 1000px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 38%;

		.echartshy {
			color: rgb(255, 153, 0);
			text-align: left;
			justify-content: left;
			background: linear-gradient(to bottom, #8fe1f3, #00cfff);
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			padding: 0 20px;

			span {
				letter-spacing: 8px;
				font-weight: 600;
				font-family: fantasy;
				font-style: italic;
			}
		}
	}
}

.echartsDom {
	width: 33%;
	height: 100%;
	background-image: url('./images/eb.png');
	background-size: 100% 100%;
	padding: 0 0%;
	position: relative;

	.pieEchartsDomTitle {
		width: 100%;
		height: 16%;
		margin: auto;
		color: #def0ff;
		text-align: center;
		font-size: calc($win-width-vw * 0.05 / 6);
		left: 0;
		top: 1%;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 0;
	}
}

.pieEcharts {
	width: 33%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: relative;

	.pieEchartsDom {
		width: 100%;
		height: 48%;
		background-image: url('./images/eb.png');
		background-size: 100% 100%;
		position: relative;

		.pieEchartsDomTitle {
			width: 100%;
			height: 16%;
			margin: auto;
			color: #def0ff;
			text-align: center;
			font-size: calc($win-width-vw * 0.05 / 6);
			left: 0;
			top: 1%;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.pieEchartsNum {
		width: 100%;
		height: 65%;
		position: relative;

		.echartsTotal {
			width: 100%;
			height: 100%;
			position: absolute;
			color: #66ffff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 3;
			flex-direction: column;
			font-size: calc($win-width-vw * 0.05 / 3.5);
			margin-top: 4%;

			.echartsTotalTitle {
				font-size: calc($win-width-vw * 0.05 / 4);
			}

			.echartsTotalDom {
				width: 100%;
				padding: 4% 3%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-around;

				.echartsTotalNum {
					display: inline-block;
					width: 11%;
					background-image: url('./images/szk.png');
					background-size: 100% 100%;
					text-align: center;
					font-size: calc($win-width-vw * 0.05 / 2.1);
				}
			}
		}

		img {
			width: 100%;
			height: 100%;
		}
	}

	.population {
		position: relative;
		height: 100%;
		width: 100%;

		.populationTab {
			.header-tab-list {
				width: 13%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
		}
	}
}

.pieEchartsCon {
	justify-content: flex-end;
	width: 34%;
}

.active {
	background: url(https://cdn-static.isjike.com/projs/datav/1.0.12/media/tabbg.ae493170.png);
	background-size: 100% 100%;
	color: #e5eeff;
	background-repeat: no-repeat;
	background-position-x: -10px;
}

.activeTow {
	background-size: 100% 100%;
	color: #00cfff;
	background-repeat: no-repeat;
	background-position-x: -10px;
}

@media screen and (max-height: ($win-width-vw * 1.9)) and (max-width: 1024px) {
	.echarts {
		height: calc(100vw *0.6);

	}

	.dataAnalysis {
		background-size: auto;
		background-repeat: no-repeat;
		background-color: #f3f3f3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-size: auto;
	}
}

@media screen and (min-height: 1024px) and (max-width: 768px) {
	.echarts {
		height: calc(100vh - 85vw);

	}


	.dataAnalysis {
		background-repeat: no-repeat;
		background-color: #f3f3f3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-size: auto;
	}
}
</style>
